<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
    </div>
    <div class="center">
      <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;">基本信息</div>
      <el-form 
      :inline="true" 
      :model="formData" 
      class="demo-form-inline" 
      label-width="140px" 
      :disabled="type=='detail'" 
      style="display: flex; justify-content:flex-start;flex-wrap: wrap;width: 90%;margin: 0 auto;"
      >
        <el-form-item label="入库单号：">
          <el-input v-model="formData.orderNumber" placeholder="请输入"></el-input>          
        </el-form-item>
        <el-form-item label="入库类型：">
          <el-select v-model="formData.inOrOutTypeName" placeholder="请选择">               
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据类型：">
          <el-select v-model="formData.sourceOrderType" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联单据类型：">
          <el-select v-model="formData.relateTypeName" placeholder="请选择">             
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联单号：">
          <div style="width: 100%;">
            <el-input v-model="formData.relateOrders" placeholder="请输入">             
              <template v-slot:append>
                <el-button type="primary" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="计划入库时间：">
          <el-input placeholder="请选择日期" v-model="formData.createTime" v-if="inputPicker" >
            <template v-slot:suffix>
              <i class="el-icon-date" @click="handleDateIconClick"></i>
            </template>
          </el-input>
          <el-date-picker v-model="formData.createTime" type="datetime" placeholder="请选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" v-if="showDatePicker" @change="handleDateChange" @blur="showDatePicker = false,inputPicker=true" ref="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item label="仓库名称：">
          <el-select v-model="formData.warehouseName" placeholder="请选择">          
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人：">
          <el-select v-model="formData.applyPerson" placeholder="请选择">        
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人部门：">
          <el-input v-model="formData.applyDepartment" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="申请人联系方式：">
          <el-input v-model="formData.personPhone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="仓管员：">
          <el-select v-model="formData.warehouseManagerName" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓管员联系方式：">
          <el-select v-model="formData.managerPhone" placeholder="请选择">               
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formData.remark" placeholder="请输入" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="title" style="margin: 20px 0; font-size: 16px; font-weight: bold;">物料信息</div>
      <el-table :data="datalist" style="width: 100%;" class="content-table-item">
        <el-table-column prop="materialFields.code" label="物料编码" align="" width=""></el-table-column>
        <el-table-column prop="materialFields.name" label="物料名称" width=""></el-table-column>
        <el-table-column prop="materialFields.standard" label="规格名称" align="center" width=""></el-table-column>
        <el-table-column prop="materialFields.comp" label="物料单位" align="center" width=""></el-table-column>
        <el-table-column prop="planAmount" label="计划数量" align="center" width=""></el-table-column>
        <el-table-column prop="actualAmount" label="实际数量" align="center" width=""></el-table-column>
        <el-table-column prop="materialFields.typeName" label="物料类型" align="center" width=""></el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      type:"",
      page:'',
      formData: {
        orderNumber: '',
        inOrOutTypeName: '',
        region:''
      },
      datalist: [],
      showDatePicker:false,
      inputPicker:true,
      pickerOptions: {
        // 可选的日期选择器配置
      }
    }
  },
  mounted() {
    const data = this.$route.params.row
    this.datalist = [data]
    console.log(data, '=====')
    this.type = this.$route.params.type;
    console.log(this.type,'=====');
    this.formData=data


     
  },
  methods: {
    //时间选择器的icon图标点击事件
    handleDateIconClick() {
      console.log(111)
      this.showDatePicker=true
      this.inputPicker=false
      // if (this.$refs.timePicker) {
      //   this.$refs.timePicker.focus();
      // } else {
      //   console.error("时间选择器未找到！");
      // }
    },
    //时间选择器的icon图标点击事件
    handleDateChange(value){
      console.log('日期选择器的值已更改:', value);
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input__inner {
  border-radius: 0 !important; //去掉圆角
}
.custom-input {
  width: 100%; /* 让输入框宽度占满父容器 */
}
.el-input, .el-select {
  width: 200px;
}
</style>
